<template>
  <div class="shop-cart fixed w100 zIndex45">
    <div class="shop-cart fixed w100 zIndex45">
      <div class="shop-cart-content flex-def"
           @click.stop="toggleList">
        <div class="shop-cart-left flex-def">
          <div class="log-wrapper radius inline-block"
               :class="{'hightLight':totalPrice>0}">
            <div class="log wh100 radius flex-def flex-cCenter flex-zCenter"
                 :class="{'hightLight':totalPrice>0}">
              <span class="icon-shopping_cart f24"></span>
            </div>
            <div class="total-count-num absolute radius"
                 v-show="totalCount>0">
              <bubble :num="totalCount"></bubble>
            </div>
          </div>
          <div class="price inline-block f15 fw700 border-1px-right"
               :class="{'tatalClass':totalPrice>0}">¥ {{totalPrice}}</div>
          <div class="desc inline-block t-c f12 fw400">另需配送费 ¥ {{deliveryPrice}}</div>
        </div>
        <div class="shop-cart-right f10 t-c fw400"
             :class="payClass"
             @click.stop.prevent="pay">
          <strong class="f14">{{payDesc}}</strong>
        </div>
      </div>
      <div class="ball-container">
        <div v-for="(ball,index) in balls"
             :key="index">
          <transition @before-enter="beforeDrop"
                      @enter="dropping"
                      @after-enter="afterDrop">
            <div class="ball"
                 v-show="ball.show">
              <div class="inner inner-hook"></div>
            </div>
          </transition>
        </div>
      </div>
      <transition name="fold">
        <div class="shop-cart-details absolute zIndex-1"
             v-show="listShow">
          <div class="details-title flex-def flex-zBetween flex-cCenter">
            <h4 class="name f12 fw400">已选商品</h4>
            <strong class="empty f14 f700 poi"
                    @click.stop.prevent="empty">清空</strong>
          </div>
          <div class="details-content"
               ref="scroll">
            <ul>
              <li class="detail-item flex-def flex-zBetween flex-cCenter border-1px-bottom"
                  v-for="(selectFood,index) in selectFoods"
                  :key="index">
                <div class="left">
                  <span class="f14 fw400">{{selectFood.name}}</span>
                </div>
                <div class="right flex-def flex-cCenter">
                  <div class="price flex-def flex-cCenter">
                    <p>
                      <span class="mark f10 fw700">¥</span></p>
                    <p><strong class="f20 fw700">{{selectFood.price}}</strong></p>
                  </div>
                  <div class="control-wrapper">
                    <control-cart :food="selectFood"
                                  @add="onAdd">
                    </control-cart>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </transition>
    </div>
    <transition name="fade">
      <div class="list-mask"
           @click="hideList"
           v-show="listShow">
      </div>
    </transition>
  </div>
</template>

<script>
import Vue from 'vue';
import BScroll from 'better-scroll';

import {
  MessageBox
} from 'mint-ui';
import bubble from 'components/bubble/bubble';
import ControlCart from 'components/ControlCart/ControlCart';
import { createBalls } from 'common/js/utils';
const innerClsHook = 'inner-hook';

export default {
  'name': 'shop-cart',
  'props': {
    'minPrice': {
      'type': Number
    },
    'deliveryPrice': {
      'type': Number
    },
    'selectFoods': {
      'type': Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return { 'balls': createBalls(), 'fold': true };
  },
  'components': { bubble, ControlCart },
  created() {
    this.dropBalls = [];
  },
  mounted() {
    // DOM渲染完成，组件挂载完成
  },
  'computed': {
    listShow() {
      if (!this.totalCount) {
        this.fold = true;
        return false;
      }
      const show = !this.fold;
      if (show) this.$nextTick(() => {
        if (!this.scroll) this.scroll = new BScroll(this.$refs.scroll, {
          'click': true,
          'scrollX': false,
          'scrollY': true
        });
        else this.scroll.refresh();
      });
      return show;
    },
    totalPrice() {
      let price = 0;
      this.selectFoods.forEach(element => {
        price += element.count * element.price;
      });
      return price;
    },
    totalCount() {
      let count = 0;
      this.selectFoods.forEach(element => {
        count += element.count;
      });
      return count;
    },
    payDesc() {
      if (this.totalPrice === 0) return `¥${this.minPrice}元起送`;
      else if (this.totalPrice < this.minPrice) return `还差${this.minPrice - this.totalPrice}起送`;
      return '去支付';
    },
    payClass() {
      if (this.totalPrice < this.minPrice) return 'no-enough';
      return 'enough';
    }

  },
  'methods': {
    pay() {
      if ((!this.totalCount) || (this.totalPrice < this.minPrice)) return;
      MessageBox({
        'title': '提示',
        'message': '确定是否去支付?',
        'showCancelButton': true,
        'confirmButtonClass': 'confirmColor'
      }).then(action => {
        if (action === 'confirm') MessageBox('提示', `需要支付${this.totalPrice}`);
        else if (action === 'cancel') MessageBox('提示', '取消了操作');
      });
    },
    empty() {
      this.selectFoods.forEach(ele => {
        Vue.delete(ele, 'count');
      });
    },
    toggleList() {
      if (!this.totalCount) return;
      this.fold = !this.fold;
    },
    hideList() {
      this.fold = true;
    },
    onAdd(target) {
      setTimeout(() => {
        this.drop(target);
      }, 100);
    },
    drop(ele) {
      for (let i = 0; i < this.balls.length; i++) {
        let element = this.balls[i];
        if (!element.show) {
          element.show = true;
          element.ele = ele;
          this.dropBalls.push(element);
          return;
        }
      }
    },
    beforeDrop(el) {
      const ball = this.dropBalls[this.dropBalls.length - 1];
      const rect = ball.ele.getBoundingClientRect();
      const x = rect.left - 32;
      const y = -(window.innerHeight - rect.top - 22);
      el.style.display = '';
      // eslint-disable-next-line no-multi-assign
      el.style.transform = el.style.webkitTransform = `translate3d(0,${y}px,0)`;
      const inner = el.getElementsByClassName(innerClsHook)[0];
      // eslint-disable-next-line no-multi-assign
      inner.style.transform = inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
    },
    dropping(el, done) {
      this._reflow = document.body.offsetHeight;
      // eslint-disable-next-line no-multi-assign
      el.style.transform = el.style.webkitTransform = `translate3d(0,0,0)`;
      const inner = el.getElementsByClassName(innerClsHook)[0];
      // eslint-disable-next-line no-multi-assign
      inner.style.transform = inner.style.webkitTransform = `translate3d(0,0,0)`;
      el.addEventListener('transitionend', done);
    },
    afterDrop(el) {
      const ball = this.dropBalls.shift();
      if (ball) {
        ball.show = false;
        el.style.display = 'none';
      }
    }
  },
  'watch': {}
};
</script>
<style lang='stylus' rel='stylesheet/stylus'>
@import '~common/stylus/mixin'
.shop-cart
  left 0
  bottom 0
  height 48px
  .shop-cart-content
    background-color #07111b
    color #999
    .shop-cart-left
      flex 1
      .log-wrapper
        position relative
        top -10px
        width 56px
        height 56px
        padding(6, 6, 6, 6)
        margin(0, 5, 0, 12)
        background-color #07111b
        box-sizing border-box
        color rgba(255, 255, 255, 0.2)
        &.hightLight
          animat()
        .total-count-num
          top 0
          left 50%
        .log
          background-color rgba(255, 255, 255, 0.2)
          &.hightLight
            background-color #00a0dc
            span
              color #fff
              font-weight 500
      .price
        padding(0, 12, 0, 5)
        margin(12, 0, 22, 0)
        line-height 25px
        border-1px-right(rgba(255, 255, 255, 0.2))
        &.tatalClass
          font-weight 600
          color #fff
      .desc
        padding(18, 0, 18, 10)
    .shop-cart-right
      flex 0 0 95px
      width 95px
      line-height 48px
      &.enough
        background #00b43c
        font-weight 600
        strong
          color #fff
      &.no-enough
        background-color rgba(255, 255, 255, 0.2)
        strong
          color #999
  .ball-container
    .ball
      position fixed
      left 32px
      bottom 22px
      z-index 200
      transition all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
      .inner
        width 16px
        height 16px
        border-radius 50%
        background #00a0dc
        transition all 0.4s linear
  .shop-cart-details
    left 0
    top 0
    width 100%
    transform translate3d(0, -100%, 0)
    &.fold-enter-active, &.fold-leave-active
      transition all 0.5s
    &.fold-enter, &.fold-leave-active
      transform translate3d(0, 0, 0)
    .details-title
      height 40px
      padding(0, 12, 0, 18)
      background #f3f5f7
      border-bottom 1px solid rgba(7, 17, 27, 0.1)
      .name
        color rgb(7, 17, 27)
      .empty
        padding(11, 11, 11, 11)
        color rgb(0, 16, 220)
    .details-content
      padding(0, 18, 0, 18)
      max-height 217px
      overflow hidden
      background #fff
      .detail-item
        height 48px
        box-sizing border-box
        border-1px-bottom(rgba(7, 17, 27, 0.1))
        &:last-child
          border-none()
        .left
          span
            color rgb(7, 17, 27)
        .right
          .price
            margin-right 10px
            p
              display inline-block
              color rgb(240, 20, 20)
              &:first-child
                margin-right 2px
                align-self flex-end
</style>
